(function(){
  $('.tabs a').click(function(){

    $(this).addClass('active')
    $(this).siblings().removeClass('active')

$('.monitor .content').eq($(this).index())
    .show()
    .siblings('.content').hide()})
})()


var myChart =  echarts.init(document.querySelector(".pie"))
var option = {
  color: [
    "#006cff",
    "#60cda0",
    "#ed8884",
    "#ff9f7f",
    "#0096ff",
    "#9fe6b8",
    "#32c5e9",
    "#1d9dff"
  ],
    series: [
  
      {
        name: '点位统计',
        type: 'pie',
        radius: ["10%", '70%'],
        center: ['50%', '50%'],
        roseType: 'radious',
        itemStyle: {
          borderRadius: 5
        },
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" }
        ],
        label:{
          fontSize:8

        },
        labelLine:{
          length:4,
          length2:3
        }
        
      }
    ]
  };
  myChart.setOption(option)
  $(window).resize(function(){
    myChart.resize()

  })

  
    var item=  {
      name:'',
      value:1200,
      itemStyle:{
        color:'#254065'
      },
      emphasis:{
        itemStyle:{
          color:'#254065'
        }
      },
      tooltip:{
        extraCssText:'opacity:0'
      }

      }
    var myChart2 = echarts.init(document.querySelector('.bar'))
    var option2 = {
      color: new echarts.graphic.LinearGradient(
        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "#00fffb" }, // 0 起始颜色
          { offset: 1, color: "#0061ce" } // 1 结束颜色
        ]
      ),
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: "0%",
        right: "1%",
        bottom: "3%",
        top: "3%",
        containLabel: true,
        show:true,
        borderColor:"rgba(0, 240, 255, 0.3)"
      },
      xAxis: [
        {

          type: 'category',
          data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都",
          "重庆"],

          axisTick: {
            alignWithLabel: false,
            show:false
          },
          axisLabel:{
            color:"#4c9bfd",
            interval:0,
            fontSize:9
          },
          axisLine:{
            lineStyle:{
              color: "rgba(0, 240, 255, 0.3)"
            }
          }
        }
      ],
      yAxis: [
        {type: 'value',
        axisTick: {
          alignWithLabel: false,
          show: false,
        },
        axisLabel:{
         color: "#4c9bfd"
        },
        axisLine:{
          lineStyle:{
          color: "rgba(0, 240, 255, 0.3)",       
        }},
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)"
          }
          }
          }],    
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '70%',
          data: [   
            2100,
            1900,
            1700,
            1560,
            1400,
            item,           
            item,           
            item,                   
            900,
            750,
            600,
            480,
            240
      ]}
      ],

    };
    myChart2.setOption(option2)
    window.addEventListener('resize',function(){
      myChart2.resize()
    })

    var data = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]
    };
var myChart3 = echarts.init(document.querySelector('.line'))
var option3 = {
  color: ["#00f2f1", "#ed3f35"],
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['预期销售额', '实际销售额'],
    textStyle:{
      color:"#4c9bfd",
      fontSize:10
    },
    itemHeight:7

  },
  grid: {
    top:'20%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    show:true,
    borderColor: "#012f4a",
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月"
    ],
    axisTick:{
      show:false
    },
    axisLabel:{
      color: "#4c9bfd"
    },
    axisLine:{
      show:false
    }
  },
  yAxis: {
    type: 'value',
    axisTick:{
      show:false
    },
    axisLabel:{
      color:"#4c9bfd"
    },
    splitLine:{
      lineStyle:{
        color:"#012f4a"
      }
    }
  },
  series: [
    {
      name: '预期销售额',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: data.year[0]
    },
    {
      name: '实际销售额',
      type: 'line',
      stack: 'Total',
      smooth:true,
      data: data.year[1]
    },
  ]
};
myChart3.setOption(option3)
var n =0
$('.caption a').click(function(){
  $(this).addClass('active')
  .siblings().removeClass('active')
  let index = $(this).index()
  n = index-1
  option3.series[0].data = data[this.dataset.type][0]
  option3.series[1].data = data[this.dataset.type][1]
  myChart3.setOption(option3)
})

window.addEventListener('resize',function(){
  myChart3.resize()
})

var timer = setInterval(function(){
    if(n>=4){n=0}
    $('.caption a').eq(n).click()
    n++
},1500)
$('.sales').mouseover(function(){
  clearInterval(timer)
})
.mouseout(function(){
    timer = setInterval(function(){
    if(n>=4){n=0}
    $('.caption a').eq(n).click()
    n++
},1200)
})


var myChart4 = echarts.init(document.querySelector('.radar'))
const dataBJ = [
  [55, 9, 56, 0.46, 18, 6, 1],

];
const lineStyle = {
  width: 1,
  opacity: 0.5
};
var option4 = {
  // tooltip:{
  //   show:true,
  //   position:['60%','10%']
  // },
 
  radar: {
    indicator: [
      { name: '机场', max: 100 },
      { name: '商场', max: 100 },
      { name: '火车站', max: 100 },
      { name: '汽车站', max: 100 },
      { name: '地铁', max: 100 },
  
    ],
    radius:"65%",
    shape: 'circle',
    splitNumber: 4,
    name:{
      textStyle:{
        color:"#4c9bfd",
        fontSize:8
      }
    },
    splitLine: {
      lineStyle: {     
        color: "rgba(255,255,255, 0.5)"
        
      }
    },
    splitArea: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)'
      }
    }
  },
  series: [
    {
      name: '北京',
      type: 'radar',
      lineStyle: {
        normal: {
          color: "#fff",
          width: 1,
          opacity: 0.5
        }
      },
      data: [[90, 19, 56, 11, 34]],
      
      symbol: 'circle',
      symbolSize:5,
      itemStyle: {
        color: '#fff'
      },
      label:{
        show:true,
        fontSize:8,
      },
      areaStyle: {
        color: "rgba(238, 197, 102, 0.6)"
      }
    },
  ]
};
myChart4.setOption(option4)
window.addEventListener('resize',function(){
  myChart4.resize()
})


var myChart5 = echarts.init(document.querySelector('.gauge'))
var option5 = {
  series: [
    {
      name: '销售进度',
      type: 'pie',
      radius: ['125%', '150%'],
      center:['50%','80%'],
      labelLine:{
        normal:{
          show:false
        }
      },
      startAngle:180,
      hoverOffset:0,
      data: [
        { value: 50,
          itemStyle:{// 颜色渐变#00c9e0->#005fc1
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "#00c9e0" }, // 0 起始颜色
              { offset: 1, color: "#005fc1" } // 1 结束颜色
            ]
          )

        } },
        { value: 50,
           itemStyle:{
          color: "#12274d"
        } },
        { value: 100,
           itemStyle:{
          color:'transparent'
        } },

      ]
    }
  ]
};
myChart5.setOption(option5)
window.addEventListener('resize',function(){
  myChart5.resize()
})


var hotData = [
  {
    city: "北京", // 城市
    sales: "25, 179", // 销售额
    flag: true, //  上升还是下降
    brands: [
      //  品牌种类数据
      { name: "可爱多", num: "9,086", flag: true },
      { name: "娃哈哈", num: "8,341", flag: true },
      { name: "喜之郎", num: "7,407", flag: false },
      { name: "八喜", num: "6,080", flag: false },
      { name: "小洋人", num: "6,724", flag: false },
      { name: "好多鱼", num: "2,170", flag: true }
    ]
  },
  {
    city: "河北",
    sales: "23,252",
    flag: false,
    brands: [
      { name: "可爱多", num: "3,457", flag: false },
      { name: "娃哈哈", num: "2,124", flag: true },
      { name: "喜之郎", num: "8,907", flag: false },
      { name: "八喜", num: "6,080", flag: true },
      { name: "小洋人", num: "1,724", flag: false },
      { name: "好多鱼", num: "1,170", flag: false }
    ]
  },
  {
    city: "上海",
    sales: "20,760",
    flag: true,
    brands: [
      { name: "可爱多", num: "2,345", flag: true },
      { name: "娃哈哈", num: "7,109", flag: true },
      { name: "喜之郎", num: "3,701", flag: false },
      { name: "八喜", num: "6,080", flag: false },
      { name: "小洋人", num: "2,724", flag: false },
      { name: "好多鱼", num: "2,998", flag: true }
    ]
  },
  {
    city: "江苏",
    sales: "23,252",
    flag: false,
    brands: [
      { name: "可爱多", num: "2,156", flag: false },
      { name: "娃哈哈", num: "2,456", flag: true },
      { name: "喜之郎", num: "9,737", flag: true },
      { name: "八喜", num: "2,080", flag: true },
      { name: "小洋人", num: "8,724", flag: true },
      { name: "好多鱼", num: "1,770", flag: false }
    ]
  },
  {
    city: "山东",
    sales: "20,760",
    flag: true,
    brands: [
      { name: "可爱多", num: "9,567", flag: true },
      { name: "娃哈哈", num: "2,345", flag: false },
      { name: "喜之郎", num: "9,037", flag: false },
      { name: "八喜", num: "1,080", flag: true },
      { name: "小洋人", num: "4,724", flag: false },
      { name: "好多鱼", num: "9,999", flag: true }
    ]
  }
];


var supHTML = ''
var brands = ''
$.each(hotData,function(index,item){
  supHTML += ` <li>
  <span>${item.city}</span>
  <span>${item.sales}<s class=${item.flag?'icon-up':'icon-down'}></s></span>
</li>`
$('.sup').html(supHTML)
})


var index = 0
$('.sup li').mouseenter(function(){
  $(this).addClass('active')
  .siblings().removeClass('active')
  // console.log($(this).index())
  index = $(this).index()
  // console.log(hotData[index].brands);
    brands = hotData[index].brands;
    var subHTML = ''
  $.each(brands,function(index,item){
    subHTML += ` <li>
    <span>${item.name}</span>${item.num}<span> <s class=${item.flag?'icon-up':'icon-down'}></s></span></li> 
    `
    $('.sub').html(subHTML)
  })


})
var lis = $(".province .sup li");
lis.eq(0).mouseenter()
lis.eq(0).addClass('active')
var timer = setInterval(function(){
  console.log('44');
 if(index>=5){index = 0}
  let liind = $('.sup li').eq(index)
  liind.mouseenter()
   index++
  // $('.sup li.eq(index)').mouseenter(function(){
  //   index++
  // })

},1000)


